<template>
    <div class="outside">
        <div class="recipeHead flex">
            <span class="span1">口味选择</span><span class="span2">☞</span>
            <ul>
                <li class="li-suan">酸</li>
                <li class="li-tian">甜</li>
                <li class="li-ku">苦</li>
                <li class="li-la">辣</li>
                <li class="li-xian">咸</li>
                <li class="li-dan">淡</li>
            </ul>
            <div class="search-div flex">
                <label>
                    <input type="text" placeholder="请输入菜品名称或食材名称">
                </label>
                <button>查询</button>
            </div>
        </div>

        <div class="recipMain">
            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
                        <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="../assets/images/logo/userHead2.jpg">
                        <img src="../assets/images/logo/userHead1.png" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
                        <img src="../assets/images/logo/userHead2.jpg" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
                        <img src="../assets/images/logo/userHead3.jpg" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
                        <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="../assets/images/logo/userHead2.jpg">
                        <img src="../assets/images/logo/userHead1.png" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
                        <img src="../assets/images/logo/userHead2.jpg" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>

            <div class="responsive">
                <div class="img">
                    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
                        <img src="../assets/images/logo/userHead3.jpg" alt="图片文本描述" width="300" height="200">
                    </a>
                    <div class="desc">菜品名称</div>
                </div>
                <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            </div>




        </div>

    </div>
</template>

<script>
    export default {
        name: "FoodRecipe"
    }
</script>

<style scoped>

    .outside {
        background-color: #ebf3f3;
    }

    .flex {
        display: flex;         /*使其内部元素呈现在一行里*/
        align-items: center;   /*使其内部元素垂直居中*/
    }

    .outside {
        width: 1700px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,0px);
    }

    .recipeHead {
        height: 100px;
        position: relative;
        margin-top: 50px;
    }

    .recipeHead .span1 {
        display: block;
        font-size: 30px;
        height: 50px;
        line-height: 50px;
        color: coral;
        margin: 0 0 0 30px;
        border-top-style: double;
        border-bottom-style: double;
        border-top-width: 5px;
        border-bottom-width: 5px;
    }

    .recipeHead .span2 {
        display: block;
        font-size: 50px;
        height: 50px;
        line-height: 50px;
        color: #722205;
        padding: 20px 10px;
    }

    li {
        display: inline;
        float: left;
        width: 50px;
        height: 50px;
        margin: 10px;
        border-radius:25px;  /*边框圆角*/
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        /*background-color: #4e4e4c;*/
    }

    .li-suan {
        background-color: gold;
    }
    .li-tian {
        background-color: deeppink;
    }
    .li-ku {
        background-color: darkgrey;
    }
    .li-la {
        background-color: red;
    }
    .li-xian {
        background-color: deepskyblue;
    }
    .li-dan {
        background-color: #e3e3cc;
    }

    li:hover {
        width: 60px;
        height: 60px;
        border-radius:30px;  /*边框圆角*/
        line-height: 60px;
        font-size: 35px;
        background-color: #343b3e;
        color: white;
        margin: 5px;
    }

    /*.search-div {*/
    /*    width: 200px;*/
    /*    height: 60px;*/
    /*    background-color: #dbe3df;*/
    /*    float: right;*/
    /*}*/

    .search-div {
        width: 300px;
        height: 60px;
        /*background-color: #dbe3df;*/
        position: absolute;
        right: 50px;
        line-height: 60px;
    }

    .search-div input {
        display: block;
        height: 40px;
        width: 200px;
        border-width: 1px;
        margin: auto 20px;
        font-size: 15px;
    }

    .search-div button {
        font-size: 20px;
    }


    .recipMain {
        width: 100%;
        margin-top: 60px;
        background-color: #fafaf1;
        /*position: absolute;*/
        /*left: 50%;*/
        /*transform: translate(-50%,0px);*/
    }

    .responsive {
        width: 400px;
        height: 300px;
        background-color: #edf5f5;
        margin: 10px;
        border: solid 1px #ded7d7;
        overflow: hidden;
        float: left;
    }

    .responsive:hover {
        border: solid 1px #a09999;
    }

    .img {
        width: 250px;
        border: #4e4e4c solid 1px;
        margin: 0 10px;
        float: left;
        overflow: hidden;
    }

    .img img{
        width: 250px;
        height: 150px;
    }

    .img .desc {
        height: 50px;
        background-color: #f6e8e8;
        font-size: 17px;
        text-align: center;
        line-height: 40px;
    }

    p {
        /*display: inline;*/
        font-size: 15px;
    }




</style>